<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="element-ui/lib/theme-chalk/index.css"/>
    <script src="js/vue.min.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios.min.js"></script>

    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
            height: 80vh;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
            <el-header>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="grid-content bg-purple" v-show="account.accUsername==''||account.accUsername==null" style="text-align: left">
                            <a href="/register.html">注册</a>
                            <a href="/login.html">登录</a>
                        </div>
                    </el-col>
                    <el-col :span="16">
                        <div class="grid-content bg-purple">
                           贴吧
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple" v-if="account.accUsername!=null" style="text-align: right">
                            <img v-bind:src="imageUrl" width="40px" height="40px"/>

                            <span v-text="account.accUsername"></span>

                            <button @click="loginOut" >安全退出</button>
                        </div>
                    </el-col>

                </el-row>

            </el-header>
            <el-main>

                <el-row>
                    <el-col :span="16" offset="4">

                        <template>
                            <el-table
                                    @row-click="showOne"
                                    :data="tableData"
                                    stripe
                                    style="width: 100%">
                                <el-table-column
                                        prop="postTitle"
                                        label="标题">
                                </el-table-column>
                                <el-table-column
                                        prop="account.accUsername"
                                        label="发帖人"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="postDate"
                                        label="发帖时间"
                                        width="180">

                                </el-table-column>
                            </el-table>
                        </template>

                    </el-col>

                </el-row>


            </el-main>
            <el-footer>
                <el-row>
                    <el-col :span="12" offset="6">

                        <template>
                            <div class="block">
                                <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page.sync="currentPage"
                                        :page-size="5"
                                        layout="total, prev, pager, next"
                                        :total="postCount">
                                </el-pagination>
                            </div>

                        </template>
                    </el-col>
                </el-row>
            </el-footer>
        </el-container>
    </el-container>



</div>
</body>

<script>
    let vu = new Vue({
        el: "#app",
        data: {
            //登录用户信息
            account:{},

            //登录用户的图像地址
            imageUrl:'',

            //默认显示的页
            currentPage: 1,
            tableData: [],
            pageNum:1,
            postCount:0,
            pageSize:1,

        },
        methods: {
            showOne(row){
           let pid =row.postId;
           window.location.assign("/post.html?postId="+pid)
            },

            /*异步分页查询*/
            showPosts(){

                axios.get(`/posts/${this.pageNum}`).then(resp=>{


                    //接收响应的map集合
                    let mp = resp.data;

                    //给表格进行数据赋值
                    vu.tableData = mp.postsList;

                    //给总帖子数进行赋值
                    vu.postCount = mp.count;

                })



            },

            loginOut(){
               /* let params={pid:1};
                let pa = new URLSearchParams(params).toString();*/
                window.location.assign("/hello.html?pid=21")
                /*window.location.href="/hello.html?"+pa;*/
                },

            //获取登录信息
            login(){
                axios.get("/account").then(resp=>{

                    //把登录用户信息赋值给account
                    vu.account = resp.data;
                    //获取登录后用户的图片地址
                    vu.imageUrl = `/image/${vu.account.accImage}`

                })


            },


            //页码点击触发事件
            handleCurrentChange(val) {
                this.pageNum = val;

                this.showPosts();
            },

            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            }

        },
        created() {
            this.login();
            this.showPosts();

        }

    })

</script>
</html>